<template>
  <div class="box">
    <!-- 头部 -->
    <div class="header">
      <img src="../../public/img/qd-13.png" alt="" />
      <div class="xtop">
        <p class="left" @click="jump">
          <img src="../../public/img/qd-1.png" alt="" />
        </p>
        <p class="right">
          <span>显示日期</span>
          <img class="one" src="../../public/img/qd-2.png" alt="" />
          <img class="two" src="../../public/img/qd-3.png" alt="" />
        </p>
      </div>
    </div>
    <!--签到  -->
    <div class="signin">
      <h1>您已连续签到</h1>
      <div class="top">
        <div class="left">
          <p>连续签到7日后每日得3分</p>
          <img src="../../public/img/qd-5.png" alt="" />
        </div>
        <div class="right">
          <p>签到提醒</p>
          <div class="bt"><van-switch v-model="checked" /></div>
        </div>
      </div>
      <ul class="a">
        <li>+1</li>
        <li>+1</li>
        <li>+2</li>
        <li>+2</li>
        <li>+2</li>
        <li>+3</li>
        <li>+3</li>
      </ul>
      <div class="imgs">
        <img src="../../public/img/qd-6.png" alt="" />
        <p></p>
      </div>
      <ul class="a b">
        <li>今日</li>
        <li>明日</li>
        <li v-for="(item, index) in state.list" :key="index">{{ item }}</li>
      </ul>
      <div class="fonts">
        <span>我的积分：7分</span>
        <img src="../../public/img/qd-7.png" alt="" />
      </div>
    </div>

    <!-- 任务中心 -->
    <div class="task">
      <p>任务中心</p>
      <div class="right">
        <span>全部任务</span>
        <img src="../../public/img/qd-7.png" alt="" />
      </div>
    </div>

    <!-- 连续签到 -->
    <div class="continuity">
      <img src="../../public/img/qd-9.png" alt="" />
      <div class="right">
        <p>连续签到，积分递增</p>
        <span>每日一签不见不散</span>
      </div>
    </div>

    <!-- 轮播 -->
    <div class="lunbo">
      <ul>
        <li>
          <img src="../../public/img/qd-10.png" alt="" />
          <p>用耳朵治愈生活</p>
          <span> {{ state.lists[0] }}-{{ state.lists[0] }} </span>
        </li>
        <li>
          <img src="../../public/img/qd-11.png" alt="" />
          <p>新父母周年庆典共读...</p>
          <span> {{ state.lists[1] }}-{{ state.lists[1] }} </span>
        </li>
        <li>
          <img src="../../public/img/qd-12.png" alt="" />
          <p>王阴阳的成功智慧</p>
          <span> {{ state.lists[2] }}-{{ state.lists[2] }} </span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { onMounted, ref } from "vue";
import { reactive } from "@vue/reactivity";
// 引入better-scroll，用于优化滚动
import BScroll from "better-scroll";
import { nextTick } from "@vue/runtime-core";
import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    const state = reactive({
      time: null,
      times: null,
      list: [],
      lists: [],
    });

    const jump = () => {
      router.go(-1);
    };

    const checked = ref(true);
    onMounted(() => {
      getCurrentDate();
      lunbo();
    });
    const getCurrentDate = () => {
      {
        for (let i = 2; i < 7; i++) {
          var now = new Date();
          var month = now.getMonth(); //得到月份
          var date = now.getDate() + i; //得到日期
          month = month + 1;
          if (month < 10) month = "0" + month;
          if (date < 10) date = "0" + date;
          //精确到天
          state.time = month + "." + date;
          state.list.push(state.time);
        }
        for (let i = 0; i < 3; i++) {
          var nows = new Date();
          var years = nows.getFullYear(); //得到年份
          var months = nows.getMonth(); //得到月份
          var dates = nows.getDate() + i; //得到日期
          months = months + 1;
          if (months < 10) months = "0" + months;
          if (dates < 10) dates = "0" + dates;
          //精确到天
          state.times = years + "." + months + "." + dates;
          state.lists.push(state.times);
        }
      }
    };
    const lunbo = () => {
      //nexTick在vue3里面是个函数 需要在vue里面解构出来  (等全部数据渲染完成之后进行滚动)
      nextTick(() => {
        new BScroll(".lunbo", {
          scrollX: true,
          scrollY: false,
          click: true,
          pullUpLoad: true,
        });
      });
    };
    return { checked, getCurrentDate, state, lunbo, jump, router };
  },
};
</script>

<style lang="less" scoped>
.box {
  /* 头部 */
  .header {
    width: 100%;
    height: 346.5px;
    position: relative;
    margin-bottom: 26.5px;
    img {
      width: 100%;
      height: 100%;
    }
    .xtop {
      position: absolute;
      position: fixed;
      top: 15.5px;
      left: 0;
      height: 16px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        img {
          width: 10px;
          height: 16px;
          margin-left: 17px;
        }
      }
      .right {
        span {
          font: 14px/14px "PingFang-SC-Regular";
          color: #ffffff;
        }

        .one {
          width: 16.5px;
          height: 13.5px;
          margin-left: 21px;
          margin-right: 26.5px;
        }
        .two {
          width: 16px;
          height: 16.5px;
          margin-right: 15.5px;
        }
      }
    }
  }
  /* 签到 */
  .signin {
    width: 100%;
    height: auto;
    padding-left: 17.5px;
    padding-right: 8.5px;
    margin-bottom: 34.5px;
    h1 {
      font: 16px/16px "PingFang-SC-Bold";
      font-weight: bold;
    }
    .top {
      height: 32px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-bottom: 20.5px;
      .left {
        padding-top: 15px;
        p {
          font: 13px/13px "PingFang-SC-Bold";
          color: #a7a7a7;
          display: inline-block;
          vertical-align: middle;
        }
        img {
          margin-left: 5.5px;
          width: 14px;
          height: 14px;
          vertical-align: middle;
        }
      }
      .right {
        display: flex;
        p {
          font: 13px/13px "PingFang-SC-Bold";
          font-weight: bold;
          color: #333333;
          margin-right: 10.5px;
        }
        .bt {
          /deep/.van-switch {
            width: 51px;
            height: 30px;
            /*  /deep/.van-switch__node {
              width: var(22.5px) !important;
              height: var(22.5px) !important;
            }
            /deep/:root {
              --van-switch-size: 22.5px !important;
            } */
          }
        }
      }
    }
    .a {
      margin-bottom: 4px;
      display: flex;
      li {
        font: 11.5px/11.5px "ArialMT";
        color: #6e6e6e;
        margin-right: 38px;
      }
    }
    .imgs {
      position: relative;
      img {
        width: 342px;
        height: 20px;
      }
      p {
        position: absolute;
        top: 8.5px;
        width: 342px;
        border: 1px dashed silver;
      }
    }
    .b {
      margin-bottom: 21px;
      li {
        margin: 0px;
        &:nth-child(1) {
          margin-right: 25px;
        }
        &:nth-child(2) {
          margin-right: 25px;
        }
        &:nth-child(3) {
          margin-right: 25px;
        }
        &:nth-child(4) {
          margin-right: 25px;
        }
        &:nth-child(5) {
          margin-right: 25px;
        }
        &:nth-child(6) {
          margin-right: 20px;
        }
      }
    }
    .fonts {
      width: 100%;
      text-align: center;
      span {
        font: 13px/13px "PingFang-SC-Bold";
        color: #333333;
        display: inline-block;
        vertical-align: middle;
        font-weight: bold;
      }
      img {
        margin-left: 5px;
        display: inline-block;
        vertical-align: middle;
      }
    }
  }
  /* 任务 */
  .task {
    height: 15.5px;
    width: 100%;
    padding-left: 16px;
    padding-right: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20.5px;
    p {
      font: 16px/16px "PingFang-SC-Bold";
      font-weight: bold;
    }
    .right {
      span {
        font: 16px/16px "PingFang-SC-Bold";
        color: #626262;
      }
      img {
        margin-left: 6.5px;
      }
    }
  }
  /* 连续签到 */
  .continuity {
    padding: 0 0 16.5px 17.5px;
    display: flex;
    .right {
      margin-left: 8px;
      p {
        font: 16px/26px "PingFang-SC-Bold";
        font-weight: bold;
      }
      span {
        font: 13px/13px "PingFang-SC-Bold";
        color: #bab9b9;
      }
    }
  }
  /* 轮播 */
  .lunbo {
    width: 100%;
    overflow: hidden;
    height: 170px;
    ul {
      display: inline-flex;
      margin-left: 12px;
      li {
        margin-right: 12.5px;
        img {
          width: 143px;
          height: 105px;
        }
        p {
          font: 13px/13px "PingFang-SC-Bold";
          color: #626262;
          padding: 3px 0px 5px 0;
        }
        span {
          font: 9.5px/9.5px "Arial-BoldMT";
          color: #d2d2d2;
        }
      }
    }
  }
}
</style>
